





<template>
    <div class="customerInfoMation">
        <div class="lookcustomer">
            <div class="custAndorder">
              <split-vertical title="条件查询"></split-vertical>
              <div class="order" style="width:500px;">
                <el-input placeholder="请输入订单编号" v-model="orderCode" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search"  @click="findCustorInfo"></el-button>
                </el-input>
              </div>

<!--                <div class="order">-->
<!--                    <el-input v-model="orderCode" placeholder="请输入订单编号" style="width:250px;" size="medium"></el-input>-->
<!--                    <el-button   @click="findCustorInfo" size="medium">搜索</el-button>-->
<!--                </div>-->
            </div>
            <div class="custdetail">
                <split-vertical title="主订单信息"></split-vertical>
                <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation" v-on:getTemplateRow="getTemplateRow" ref="table"></v-table>
            </div>
            <div class="complaintInfomation">
              <split-vertical title="客诉信息"></split-vertical>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" style="width:100%;margin-top:10px;">
                            <el-row >
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="客诉原因" prop="complainReason">
                                            <el-select v-model="ruleForm.complainReason" placeholder="请选择" allow-create filterable clearable>
                                                <el-option
                                                v-for="item in complaintReason"
                                                :key="item.id"
                                                :label="item.label"
                                                :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="解决方案" prop="complainSolution">
                                            <el-select v-model="ruleForm.complainSolution" placeholder="请选择"  allow-create filterable clearable>
                                                <el-option
                                                v-for="item in solveList"
                                                :key="item.id"
                                                :label="item.label"
                                                :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="情况说明" prop="complainSituation">
                                            <el-input v-model="ruleForm.complainSituation"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="备注" prop="remark">
                                            <el-input   v-model="ruleForm.remark"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="姓名" prop="receiverName">
                                            <el-input v-model="receiverName"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="联系方式" prop="receiverPhone">
                                            <el-input v-model="receiverPhone"  onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="客诉类型" prop="complainType">
                                            <el-select v-model="ruleForm.complainType" placeholder="请选择">
                                                <el-option
                                                v-for="item in exchangeGoods"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="责任方" prop="responsibleParty">
                                            <el-select v-model="ruleForm.responsibleParty" placeholder="请选择">
                                                <el-option
                                                v-for="item in ResponsibleParty"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                       <el-form-item label="产生费用" prop="isCost">
                                            <el-radio-group v-model="ruleForm.isCost">
                                                <el-radio :label="true">是</el-radio>
                                                <el-radio :label="false">否</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="费用类型" prop="costType">
                                        <el-select v-model="ruleForm.costType" placeholder="请选择">
                                            <el-option
                                            v-for="item in costType"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="额外费用" prop="extraCharges">
                                            <el-input v-model="ruleForm.extraCharges"  oninput="this.value=this.value.replace(/[^\-?\d.]/g,'')"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="快递费用" prop="postageAssume">
                                            <el-input v-model="ruleForm.postageAssume" oninput="this.value=this.value.replace(/[^\-?\d.]/g,'')"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row >
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="订单编号">
                                            <el-input v-model="orderCodeData"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="退货单号" prop="returnExpressCode">
                                            <el-input v-model="ruleForm.returnExpressCode"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="物流退货" >
                                        <div class="find">
                                            <el-input type="textarea" :rows="4" v-model="logicsReturn" style="display:inline-block"></el-input>
                                            <p>
                                                <el-button @click="findReg" size="small" >查询</el-button>
                                            </p>
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item class="btn">
                                <el-button type="primary" @click="submitForm('ruleForm')" :disabled="isCallBtn" size="medium">确认</el-button>
                                <el-button @click="cancelAdd" size="medium">取消</el-button>
                            </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import VTable from "components/common/PageTable/VTable"
import api from 'js/service'
import {localStorage} from 'js/localStorage'
import SplitVertical from "components/common/SplitVertical"
export default {
    inject:['reload'],
    data(){
        return{
            //创建按钮是否disabled
            isCallBtn:false,
            // v-model
            orderCode:'',
            logicsReturn:'',
            //主订单的行数据
            rowData:{},
            //单选
            orderId:'',
            orderCodeData:'',
            receiverPhone:'',
            receiverName:'',
            tableParams:{
                dataArray:[],
                showMultiSelection:false,
                showRadioSelection:true,
                columnArray:[
                    {label: '订单公司', prop: 'companyName',  sortable: false},
                    {label: '订单平台', prop: 'channelName',  sortable: false},
                    {label: '订单编号', prop: 'orderId',  sortable: false},
                    {label: '订单时间', prop: 'orderTime',sortable: false},
                    {label: '渠道商品名称', prop: 'orderItemName',sortable: false},
                    {label: '购买数量', prop: 'purchaseNum',sortable: false,width:'80'},
                    {label: '姓名', prop: 'receiverName',sortable: false,width:'80'},
                    {label: '联系方式', prop: 'receiverPhone',sortable: false,width:'120'},
                    {label: '地址', prop: 'receiverAddress',sortable: false},
                    {label: '订单金额', prop: 'orderMoney',sortable: false,width:'80'},
                    {label: '订单状态', prop: 'orderStatus',sortable: false,width:'80'},
                    {label: '快递单号', prop: 'expressCode',sortable: false},
                ],
                rowHandle:{
                    view:{
                        show:false
                    },
                    update:{
                        show:false
                    },
                    deleted:{
                        show:false
                    },
                    buttonArray:[
                        {
                            text: '查看物流',
                            show: true,
                            type: 'text',
                            methodName: 'lookLogics'
                        },{
                            text: '详情',
                            show: true,
                            type: 'text',
                            methodName: 'details'
                        }
                    ],
                }
            },
            ruleForm:{
                /** 客诉原因 */
                complainReason:'改地址',
                /** 客诉情况说明 */
                complainSituation:'',
                /** 客诉解决方案 */
                complainSolution:'已处理',
                /** 联系方式 */
                // customerContact:'',
                /** 客户姓名 */
                // customerName:'',
                /**客诉类型 **/
                complainType:"咨询",
                /**备注 **/
                remark:'',
                /** 客诉承担责任方(1:无 2:邮政 3:厂家) */
                responsibleParty:'无',
                /*是否产生费用*/
                isCost:false,
                /** 客诉费用类型(0:无 1:采购 2:物流 3:采购和物流) */
                costType:'无',
                //快递费用
                postageAssume:0,
                /** 客诉额外费用 */
                extraCharges:0,
                /** 客户退货物流单号 */
                returnExpressCode:'',
            },

            //客诉类型
            exchangeGoods:[
               {
                    value:'0' ,
                    label:"咨询",
                },{
                    value:'1',
                    label:'退货'
                },{
                    value:'2',
                    label:'换货'
                },{
                    value:'3',
                    label:'补发'
                }],

            //责任方
            ResponsibleParty:[
                {
                    value:'1' ,
                    label:"无",
                },{
                    value:'2',
                    label:'邮政'
                },{
                    value:'3',
                    label:'厂家'
                }],
            //费用类型
            costType:[
                {
                    value :'0',
                    label:"无"
                },
                {
                    value:'1' ,
                    label:"商品采购费",
                },{
                    value:'2',
                    label:'物流费'
                },
                {
                    value:'3',
                    label:'采购和物流费用'
            }],
            complaintReason:[
                {
                    id:'1',
                    value :'改地址',
                    label:"改地址"
                },
                {
                    id:'2',
                    value:'改号码' ,
                    label:"改号码",
                },
                {
                id:'3',
                value:'破损',
                label:'破损'
              },
              {
                  id:'4',
                  value:'缺货',
                  label:'缺货'
              },
              {
                  id:'5',
                  value:'未发货',
                  label:'未发货'
              },
              {
                  id:'6',
                  value:'质量',
                  label:'质量'
              },
              {
                  id:'7',
                  value:'咨询',
                  label:'咨询'
              },
              {
                id:'8',
                value:'限制发货',
                label:'限制发货'
              },
              {
                id:'9',
                value:'催货',
                label:'催货'
              },
               {
                id:'10',
                value:'丢件',
                label:'丢件'
              },
              {
                id:'11',
                value:'七天无理由退货',
                label:'七天无理由退货'
              },
              {
                id:'12',
                value:'漏发',
                label:'漏发'
              }],
            solveList:[
                {
                    id:'1',
                    value:'已处理',
                    label:'已处理'
                },
                {
                    id:'2',
                    value:'线下补偿',
                    label:'线下补偿'
                },
                {
                    id:'3',
                    value:'补发',
                    label:'补发'
                },
                 {
                    id:'4',
                    value:'退积分',
                    label:'退积分'
                },
            ],
            rules:{
                complainReason: [
                    { required: true, message: '请输入客诉原因', trigger: 'blur' },
                    { min: 2, max:20, message: '长度在 2 到 20个字符', trigger: 'blur' }
                ],
                complainSituation: [
                    { required: true, message: '请输入情况说明', trigger: 'change' }
                ],
                customerName:[
                    { required: true, message: '请输入姓名', trigger: 'change' }
                ],
                customerContact:[
                    { required: true, message: '请输入联系方式', trigger: 'blur' },
                    { min: 11, max:11, message: '请输入正确的手机号', trigger: 'blur' }
                ],
                complainType: [
                    { required: true, message: '请选择客诉类型', trigger: 'change' }
                ],
                responsibleParty: [
                    { required: true, message: '请选择责任方', trigger: 'change' }
                ],
                isCost: [
                    {  required: true, message: '请至少选择一个产生费用', trigger: 'change' }
                ],
                costType:[
                    { required: true, message: '请选择费用类型', trigger: 'change' }
                ]
            },
            isSolve:'',
            typeVal:'',
            Mainlogic:''
        }
    },
    created(){
        this.userId= localStorage.get("userID")
        this.orderCode=this.$route.query.orderCode
        if(this.orderCode){
            this.findCustorInfo()
        }
    },
    methods:{
        //跳转
        cancelAdd(){
            this.$router.push({
                path:'/complaint'
            })
        },
        handleOperation(rowIndex, row, methodName) {
            this.rowData=row
            if(methodName == "lookLogics"){
               this.findMainOrder()
            }else if(methodName == "details"){
                this.lookOrderDetail()
            }
        },
      //实现单选
        getTemplateRow(index,row){
          this.orderId=row.id;
          this.orderCodeData=row.orderId;
          this.receiverName=row.receiverName;
          this.receiverPhone=row.receiverPhone
        },
        //详情
        lookOrderDetail(){
          this.$router.push({
              path:"/order-query-detail",
              query:{
                id:this.rowData.id,
                orderCode:this.orderCode,
                path:'add'
              }
          })
        },
        //根据订单编号查询
        findCustorInfo(){
          if(this.orderCode == '' || this.orderCode == undefined  ){
            return this.$message.warning("请输入订单编号")
          }
            let parmas={
                orderCode:this.orderCode
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.tableParams.dataArray=data.data
                } else{
                    this.$message.error(data.msg)
                }
            }
           this.api.orderQueryOrder(parmas,success)
        },
        //主订单物流信息查询
        findMainOrder(){
            if(this.rowData.expressCode == null){
                return this.$message.warning("快递单号为空")
            }
            let parmas={
                expressCode:this.rowData.expressCode
            }
            let success=data=>{
                if(data.code=="OK"){
                    this.Mainlogic=data.data
                    const h = this.$createElement;
                    this.$notify({
                        title: '物流信息',
                        message: h('i', { style: 'color: teal'}, this.Mainlogic)
                    });
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.chcomformaSelectLogistics(parmas,success)
        },
        //表单提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.createComplaintOrder()
                } else {
                    return false;
                }
            });
        },
        //创建客服诉单
        createComplaintOrder(){
            var reg=/^(\-|\+?)\d+(\.\d+)?$/
             if(!reg.test(this.ruleForm.postageAssume)){
              return  this.$message.warning("输入的快递费用不正确")
             }
            if(!reg.test(this.ruleForm.extraCharges)){
             return  this.$message.warning("输入的额外费用不正确")
            }
            if(this.ruleForm.complainType == "咨询"){
                this.ruleForm.complainType = '0'
            }
            if(this.ruleForm.responsibleParty == "无"){
                this.ruleForm.responsibleParty = '1'
            }
            if(this.ruleForm.costType =="无" ){
                this.ruleForm.costType = '0'
            }
            let parmas=this.ruleForm
                parmas['orderId']=this.orderId
                parmas['orderCode']=this.orderCode
                parmas['customerName']=this.receiverName
                parmas['customerContact']=this.receiverPhone
                parmas['userId']=this.userId
            this.isCallBtn=true
            let success=data=>{
                if(data.code == "OK"){
                    this.$message.success('创建客诉成功')
                    this.isCallBtn=false
                    this.$router.go(-1)
                }else{
                    this.$message.error(data.msg)
                    this.isCallBtn=false
                }
            }
            this.api.erpComplaintAdd(parmas,success)
        },
        //退货的物流信息
        findReg(){
            if(this.ruleForm.returnExpressCode == null || this.ruleForm.returnExpressCode == ""){
                return this.$message.warning("请输入退货的快递单号")
            }
            let parmas={
                expressCode:this.ruleForm.returnExpressCode
            }
            let success=data=>{
                if(data.code=="OK"){
                   this.logicsReturn=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.chcomformaSelectLogistics(parmas,success)
        },

    },
    components:{
      VTable,SplitVertical
    }
}
</script>
<style lang="scss" scoped>
.customerInfoMation{
    .lookcustomer{
        .custAndorder{
            background: #fff;
            margin-bottom:2px;
            border-left: 2px solid #e8e8e8;
            border-right: 2px solid #e8e8e8;
            border-bottom: 2px solid #e8e8e8;
            .order{
                line-height:50px;
                margin-left: 10px;
            }
        }
        .custdetail{
            background: #fff;
            margin-bottom: 2px;
            padding:0 10px;
            border-left: 2px solid #e8e8e8;
            border-right: 2px solid #e8e8e8;
            border-bottom: 2px solid #e8e8e8;
        }
        .complaintInfomation{
            padding: 0 10px;
            background: #fff;
            border-left: 2px solid #e8e8e8;
            border-right: 2px solid #e8e8e8;
            border-bottom: 2px solid #e8e8e8;
            .el-select{
                width:100%;
            }
            .find{
                position:relative;
                p{
                    position:absolute;
                    left:100%;
                    top:-5%;
                }
            }

        }
        .btn{
            width:100%;
            text-align:center;
            padding:10px 0;
        }
    }
}
</style>
